// * 员工详情页面
<template>
  <div class="details-item">
    <div class="scroll-wrap">
      <!-- 导航栏 -->
      <!-- <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      > -->
      <nav-bar />
      <!-- 上面的卡片 -->
      <van-card class="InfoCard">
        <template #tags>
          <van-row class="baseInfo">
            <van-col span="7">
              <img
                v-if="peoplelist[0]"
                :src="peoplelist[0].photo"
                class="picture"
              />
            </van-col>
            <van-col span="12">
              <van-row class="workName" v-if="peoplelist[0]">{{
                peoplelist[0].name
              }}</van-row>
              <van-row
                ><div class="border" v-if="peoplelist[0]">
                  {{ peoplelist[0].grades }}
                </div></van-row
              >
              <van-row class="experience" v-if="peoplelist[0]">
                {{ peoplelist[0].informations }}
              </van-row>
            </van-col>
            <van-col span="5">
              <van-button class="btn-attention">关注</van-button>
            </van-col>
          </van-row>
        </template>
        <!--  -->
        <template #footer>
          <van-row class="company" v-if="peoplelist[0]"
            >注册公司：{{ peoplelist[0].registcompany }}</van-row
          >
          <van-row class="occupation" v-if="peoplelist[0]"
            >职业：<van-button
              class="zhiyebtn"
              v-for="(obj, index) in peoplelist[0].profession"
              :key="index"
              >{{ obj }}</van-button
            ></van-row
          >
          <van-row class="relation" type="flex" justify="space-between">
            <van-col sapn="16">
              <i class="iconfont jiazhengrenzheng"></i>
              <span class="text"> 身份信息已核实</span>
            </van-col>
            <van-col sapn="6" class="contact">
              <van-button size="mini" class="contact-btn">电话联系</van-button
              ><br />
              <van-button size="mini" class="contact-btn weChat"
                >微信联系</van-button
              >
            </van-col>
          </van-row>
        </template>
      </van-card>
      <!-- -------------------------------->
      <!-- 下面的卡片 -->
      <van-card class="footer-card">
        <template #tags>
          <br />
          <van-row>
            <i class="iconfont jiazhengshuxian"></i>
            <span class="title">主要技能</span>
          </van-row>
          <van-row class="skill" v-if="peoplelist[0]">
            <van-tag
              v-for="(obj, index) in peoplelist[0].skills"
              :key="index"
              plain
              class="skill-item"
              >{{ obj }}</van-tag
            >
          </van-row>
          <br />
          <van-row>
            <i class="iconfont jiazhengshuxian"></i>
            <span class="title">个人简介</span>
          </van-row>
          <van-row>
            <p>
              2019年8月在湖南女子学院优家培训平台以优异的成绩，
              荣获中级育婴结业证书，并获得被动操和实操能手荣誉证书。参加国家职业资格证考试，获得国家职业资格证书育婴员证，会做精致的辅食，婴儿常见疾病的护理，宝宝哄睡，以及良好的生活习惯。擅长科学育儿，会新生儿的黄疸辩证和护理，会脐带消毒和护理，臀部护理，洗澡抚触，婴儿主被动操，穿脱衣服，做简单早教。其他技能：亲和力非常不错，形象气质很好，积极主动，能很好的与他人沟通，做事细心，勤快，有耐心，敬业，能吃苦。
              普通话标准，有爱心，曾在私塾教书2年，对胎婴幼儿教育有一定的认识。有带过一个1岁左右的女宝宝到3岁多上幼儿园的经验，做饭菜好吃，可以兼做饭菜，家务。
            </p>
          </van-row>
          <br />
          <van-row>
            <i class="iconfont jiazhengshuxian"></i>
            <span class="title">个人简介</span>
          </van-row>
          <p v-if="peoplelist[0]">{{ peoplelist[0].registcompany }}</p>
          <p v-if="peoplelist[0]">籍贯民族：{{ peoplelist[0].nativeplace }}</p>
          <p v-if="peoplelist[0]">生肖属相：{{ peoplelist[0].zodiac }}</p>
          <p v-if="peoplelist[0]">
            星座：{{ peoplelist[0].constellation }}（12.22~1.19）
          </p>
          <p v-if="peoplelist[0]">出生日期：{{ peoplelist[0].datebirth }}</p>
          <p v-if="peoplelist[0]">学历：{{ peoplelist[0].add }}</p>
          <br />
          <van-row>
            <i class="iconfont jiazhengshuxian"></i>
            <span class="title">证件信息</span>
          </van-row>
          <br />
          <van-row>
            <van-grid :border="true" :column-num="3" :gutter="5" class="grids">
              <van-grid-item>
                <img
                  class="images"
                  v-if="peoplelist[0]"
                  :src="peoplelist[0].identityinfo"
                />
              </van-grid-item>
              <van-grid-item>
                <img
                  class="images"
                  v-if="peoplelist[0]"
                  :src="peoplelist[0].identityinfo"
                />
              </van-grid-item>
              <van-grid-item style="position:relative">
                <img
                  class="images last"
                  v-if="peoplelist[0]"
                  :src="peoplelist[0].identityinfo"
                />
              </van-grid-item>
            </van-grid>
          </van-row>
          <br />
          <van-row>
            <i class="iconfont jiazhengshuxian"></i>
            <span class="title">证件信息</span>
            <br />
          </van-row>
          <van-row>
            <van-grid :border="true" :column-num="3" :gutter="5" class="grids">
              <van-grid-item>
                <img
                  class="images"
                  v-if="peoplelist[0]"
                  :src="peoplelist[0].identityinfo"
                />
              </van-grid-item>
              <van-grid-item>
                <img
                  class="images"
                  v-if="peoplelist[0]"
                  :src="peoplelist[0].identityinfo"
                />
              </van-grid-item>
              <van-grid-item>
                <img
                  class="images last"
                  v-if="peoplelist[0]"
                  :src="peoplelist[0].identityinfo"
                />
              </van-grid-item>
            </van-grid>
          </van-row>
        </template>
      </van-card>
      <!-- 下侧标签栏 -->
      <van-grid clickable :column-num="4" class="grid-bar" border="">
        <van-grid-item>
          <i class="iconfont jiazhengpinglun"></i>
          <span class="text">评论</span>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont jiazhengfenxiang"></i>
          <span class="text">分享</span>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont jiazhengweixin"></i>
          <span class="text">微信联系</span>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont jiazhengphone"></i>
          <span class="text">电话联系</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/navigation";
import { getpeople } from "@/api/user";
export default {
  components: { NavBar },
  name: "DetailsPage",
  data() {
    return {
      // loading 和 finished 两个变量控制加载状态
      // 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
      loading: false,
      finished: false,
      tabberShow: false,
      peoplelist: [],
      id: this.$route.query.id
    };
  },
  created() {
    this.getpeople();
  },
  mounted() {},
  methods: {
    // onLoad() {
    //   // 加载状态结束
    //   this.loading = false;
    //   this.finished = true;
    // }
    async getpeople() {
      const { data } = await getpeople();
      console.log(this.id);
      this.peoplelist = data.filter(item => item.phone === this.id);
      console.log(this.peoplelist);
    }
  }
};
</script>

<style scoped lang="scss">
body {
  &::-webkit-scrollbar {
    /*必须先设置这个属性*/
    background-color: red;
  }
  &::-webkit-scrollbar-track {
    background-color: green;
  }
  position: relative;
  .details-item {
    position: absolute;
    top: 0;
    z-index: 9999;
    height: 1334px;
    ::v-deep .van-grid-item__content {
      padding: 0rem 0rem;
    }

    .InfoCard {
      height: 416px;
      width: 684px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 100);
      // background-color: rgb(247, 165, 165);
      color: rgba(16, 16, 16, 100);
      // FIXME
      border: 0px;
      // border: 2px solid rgba(255, 255, 255, 100);
      position: absolute;
      top: 128px;
      left: 36px;
      z-index: 1;
      padding: 0;
      margin: 0;
    }
    .baseInfo {
      height: 200px;

      .picture {
        width: 144px;
        height: 144px;
        margin: 28px 0 0 16px;
      }
      .workName {
        margin-top: 28px;
        font-size: 28px;
      }
      .border {
        height: 46px;
        width: 170px;
        border: 1px solid #6473c3;
        border-radius: 23px;
        text-align: center;
        line-height: 46px;
        font-size: 20px;
        color: #6473c3;
        margin-top: 16px;
      }
      .experience {
        margin-top: 13px;
        color: #888787;
      }
      .btn-attention {
        height: 50px;
        width: 126px;
        margin-top: 26px;
        border-radius: 25px;
        border: 1px solid #3f51b5;
        font-size: 24px;
      }
    }
  }
  .company {
    text-align: left;
    margin-left: 30px;
    color: #ada9a9;
  }
  .occupation {
    text-align: left;
    margin-left: 30px;
    color: #ada9a9;
    margin-top: 14px;
  }
  .relation {
    height: 130px;
    margin-left: 28px;
    .jiazhengrenzheng {
      font-size: 36px;
      color: #3f51b5;
      line-height: 130px;
    }
  }
  .contact {
    margin-right: 22px;
    .contact-btn {
      color: #3f51b5;
      border: 1px solid #3f51b5;
      height: 46px;
      width: 142px;
      border-radius: 46px;
    }
    .weChat {
      margin-top: 18px;
    }
  }
  .footer-card {
    border-radius: 10px;
    width: 684px;
    position: absolute;
    top: 560px;
    left: 36px;
    color: #999696;
    padding: 0;
    margin-bottom: 50px;
    background-color: #fff;

    .skill {
      font-size: 20px;
      .skill-item {
        height: 46px;
        padding: 0px 24px;
        margin: 10px 19px;
        border-radius: 23px;
        border: #7985cb;
        color: #7985cb;
      }
    }
  }
  .grid-bar {
    position: absolute;
    background-color: #fff;
    height: 134px;
    top: 2210px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    .iconfont {
      font-size: 44px;
      color: #979191;
    }
    span.text {
      font-size: 24px;
      color: #979191;
    }
  }
  //
  .jiazhengshuxian {
    font-size: 28px;
    color: #3f51b5;
  }
  .title {
    font-size: 28px;
    color: #000;
  }
  //
  .scroll-wrap {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow-y: auto;
  }
  .zhiyebtn {
    width: 120px;
    height: 34px;
    border: 0;
    padding: 0;
    color: rgba(151, 145, 145, 100);
    transform: translate(-25px, -8px);
    .van-button__text {
      font-size: 20px;
    }
  }
  .images {
    width: 200px;
    height: 148px;
    margin-left: -3px;
    display: inline-block;
  }
}
</style>
